<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
     <link rel="shortcut icon"href="https://pic.baike.soso.com/ugc/baikepic2/7330/20160726230436-313769386.jpg/0"><title>批量图片压缩</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<h1>批量图片压缩</h1>
</head>
<head>
    <style>
		body {

			background-color: #C0FFEE; 
			color: #6600FF; /* 设置颜色为 #6600FF */
			}
		
			.centered-text {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50vh;
			}
		h1 {
        text-align: center;
        margin-top: 100px; /* 调整上边距 */
           }
	    #fileInput {
		  background-color: #C0FFEE; 
		  color: blue;
		  border: none;
		  padding: 10px;
		  cursor: pointer;
		  font-size: inherit;
		  appearance: none;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		}

		#fileInput::-webkit-file-upload-button {
		  background-color: #f5c860;
		  color: blue;
		  border: 2px solid #736946; /* 土黄色边缘加重 */;
		  padding: 10px;
		  cursor: pointer;
		  border-bottom: 2px solid #736946; /* 下边缘加暗线 */
		  border-top: 2px solid lightgray; /* 上边缘加灰色 */
		}

		button {
		  background-color: #f5c860; /* 土黄色 */
		  color: blue;
		  border: 2px solid #736946; /* 土黄色边缘加重 */
		  padding: 10px 20px;
		  cursor: pointer;
		  font-size: inherit;
		  border-bottom: 2px solid #736946; /* 下边缘加暗线 */
		  border-top: 2px solid lightgray; /* 上边缘加灰色 */
		}		   
	</style>

</head>
<body>
    <div class="centered-text">
        <input type="file" id="fileInput" multiple>
        <input type="range" id="compression" min="1" max="100" value="80" step="1" oninput="document.getElementById('compressionValue').textContent = this.value + '%'">
		<label for="compression">调节压缩大小（<span id="compressionValue">80%</span>）：</label>
		<select id="format">
            <option value="jpg">JPG</option>
            <option value="png">PNG</option>
        </select>
        <button onclick="compressAndConvertImages()">压缩和下载</button>
		<a id="downloadLink" style="display: none;"></a>
    </div>
</body>
<script>
function compressAndConvertImages() {
    const fileInput = document.getElementById('fileInput');
    const compression = document.getElementById('compression');
    const compressionValue = compression.value / 100;
    const format = document.getElementById('format').value;

    if (fileInput.files.length > 0) {
        for (let i = 0; i < fileInput.files.length; i++) {
            const file = fileInput.files[i];
            const reader = new FileReader();

            reader.onload = function(e) {
                const img = new Image();
                img.src = e.target.result;

                img.onload = function() {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');

                    const maxWidth = img.width * compressionValue;
                    const maxHeight = img.height * compressionValue;

                    canvas.width = maxWidth;
                    canvas.height = maxHeight;

                    ctx.drawImage(img, 0, 0, maxWidth, maxHeight);

                    const dataUrl = canvas.toDataURL(`image/${format}`);

                    const link = document.createElement('a');
                    link.href = dataUrl;
                    link.download = `上传中残联系统_${file.name.replace(/\.\w+$/, '.') + format}`;
                    link.click();
                };
            };

            reader.readAsDataURL(file);
        }
    } else {
        alert('Please select one or more image files.');
    }
}
</script>

</body>
</html>